<template>
  <view class="w-full">


    <!-- 完整图片显示 -->
    <div class="flex items-center">
      <div class="box1">
        <image class="img1" src="/static/logo.png"></image>
      </div>
    </div>

    <div class="confirmLine p-2 rounded-md m-2 gap-2 flex-col flex">
      <div class="flex">
        <div class="font-bold">
          用工需求：
        </div>
        {{ formdata.title }}
      </div>

      <div class="flex">
        <div class="font-bold">
          用工人数：
        </div>
        {{ formdata.headCount }}人
      </div>

      <div class="flex">
        <div class="font-bold">
          工
          &nbsp;
          &nbsp;
          &nbsp;
          期：
        </div>
        {{ formdata.workTime }}天
      </div>

      <div class="flex">
        <div class="font-bold">
          购买物料：
        </div>
        {{ formdata.preparations }}
      </div>

      <div class="flex">
        <div class="font-bold">
          开工时间：
        </div>
        {{ dayjs(formdata.startTime).format("YYYY-MM-DD HH:mm") }}
      </div>

      <div class="flex">
        <div class="font-bold">
          工
          &nbsp;
          钱：
        </div>
        <div class="text-red-500">
          ￥{{ formdata.price }}元
        </div>

      </div>

      <div class="flex">
        <div class="font-bold">
          预
          &nbsp;
          算：
        </div>
        <div class="text-red-500">
          ￥{{ formdata.preparationsPrice }}
        </div>
      </div>
    </div>

    <div class="confirmLine p-2 rounded-md m-2 gap-2 flex-col flex">
      <div class="text-lg">
        描述
      </div>
      <textarea class="w-full">
                                                                                                       {{ formdata.requirements }}
                                                                                                      </textarea>
    </div>

    <div class="confirmLine p-2 rounded-md m-2 gap-2 flex-col flex">

      <div>
        联系电话：{{ formdata.phone }}
      </div>

      <div>
        维护地址：{{ formdata.location }}
      </div>
    </div>


    <!-- 确认订单按钮 -->
    <button class="bg-[#1483F2]" @touchend="handleSwitch">
      确认无误，立即发布
    </button>

  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import { reactive, ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app"
const formdata = ref(
  {
    title: "闭路监控系统",
    headCount: 2,
    workTime: 3,
    preparations: "网线10米、插线板3个",
    startTime: Date.now(), //时间戳
    price: 20,
    preparationsPrice: 1200,
    requirements: "摄像头无法显示，其中有一个摄像头成像模糊。",
    phone: 18312343856,
    location: "重庆市渝北区水星B区物业中心"
  }
)


function handleSwitch() {
  uni.request({
    url: '/order',
    method: 'POST',
    data: formdata.value,
    success: ({ data }) => {
      console.log(data)
      uni.navigateTo({ url: "/pages/workerneedsuccess/workerneedsuccess" });
    }
  })
}

onLoad(option => {
  formdata.value = JSON.parse(option.data)
  console.log("test", formdata.title)
})

</script>

<style scoped>
.confirmLine {
  border: 1px solid rgba(31, 31, 31);
}

.box1 {
  width: 320px;
  height: 240px;
  margin: 0 auto;
  overflow: hidden;
}

.box_imgs {
  width: calc(3 * 320px);
  height: 240px;
}

.img1 {
  float: left;
  height: 240px;
  width: 320px;
}
</style>